import { addClass, removeClass } from 'element-ui/src/utils/dom';
import Velocity from 'velocity-animate';

export default {
  name: 'g2DrawerTransition',
  functional: true,
  render(h, { children, listeners }) {
    const data = {
      on: {
        beforeEnter(el) {
          el.style.opacity = 0;
          el.style.transition = 'none';
        },

        enter: el => {
          let width = el.offsetWidth;
          el.dataset.width = width;
          el.style.opacity = 0;
          el.style.transform = 'translateX(' + width + 'px)';
          el.style.transition = 'all .3s ease-in-out';
        },

        afterEnter(el) {
          el.style.opacity = 1;
          el.style.transform = 'translateX(0px)';
          // for safari: remove class then reset height is necessary
        },

        beforeLeave(el) {
          let width = el.offsetWidth;
          el.style.opacity = 0;
          el.style.transform = 'translateX(' + width + 'px)';
          el.style.transition = 'all .3s ease-in-out';
        },

        leave(el) {
          
        },

        afterLeave(el) {
          if (listeners && listeners.afterLeave) {
            listeners.afterLeave();
          }
        }
      }
    };

    return h('transition', data, children);
  }
};
